<template>
	<view class="gjl-components">
		<u-modal v-model="show" title="邀请码" :show-cancel-button="true">
			<view class="model-content">
				<view class="user" v-if="ucode_user.avatar">
					<view class="faceimg">
						<image mode="widthFix" :src="ucode_user.avatar"></image>
					</view>
					<view class="nackname">{{ucode_user.nickname}}</view>
				</view>
				<u-field v-model="invite" @input="input" :border-bottom="false" :focus="true" label="邀请码"
					placeholder="请输入邀请码"></u-field>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: [String, Number],
				default: ''
			}
		},
		watch: {
			invite(nv) {
				this.$emit('input', this.invite)
			}
		},
		data() {
			return {
				show: false,
				invite: '',
				ucode_user: {}
			}
		},
		created() {
			this.invite = this.value;
		},
		methods: {
			input() {
				if (this.invite.length < 4) {
					this.ucode_user = {};
					return
				}
				this.$u.debounce(this.getInfo, 500)
			},
			getInfo() {
				let obj = {
					invite_code: this.invite
				}
				this.$apis.getInviteInfo(obj).then((res) => {
					this.ucode_user = res;
					console.log(res)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.user{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.user .faceimg {
		width: 100rpx;
		height: 100rpx;
		padding: 2px;
		border: 2px #F3F3F3 solid;
		border-radius: 50%;
	}

	.user .faceimg image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.user .nackname {
		font-size: 32rpx;
		margin: 5px;
		text-align: center
	}

	.model-content {
		min-height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
</style>
